<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overview</title>
    <link href="css/layui.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body style="width: auto;">

<div class = "overviewContentBox">
    <div class = "overviewBox1">
        <div class="titleBox">
            <div style="float: left;" class="moudolTitle">项目情况</div>
            <img src="images/icon1.png" width="28px" height="15px" style="margin: 10px 5px"/>
        </div>
		
		<div class="contBoxDiv">
        <div class = "contentBox XMSDiv">
          
		  <div class="contentDiv">
		 	<div align="center" class="contentBoxTitle">
					<div align="center" class = "titleText">项目数</div>
			</div>
		</div>
            <div class = "myChartBox" id = "XMSMyChart"></div>
        </div>
        
		
        <div class = "contentBox TZSDiv  tzBox">
	     <div class="contentDiv">
	 		<div align="center" class="contentBoxTitle">
	 			<!-- <img src="images/BG1.png"> -->
				<div align="center" class = "titleText" >投资数</div>
	 			</div>
	    </div>	
            <div class = "TZSContentBox" align="center">
                <div class = "TZSDYContent TZSContentBoxItem">
                    <div class = "TZSDYContentLeftBox">
						<div  class="TZSDYContWrap">
							<img src="images/TZSDYIcon.png" width="40px" height="40px">
							<div class = "TZSDYContentLeftText">当月情况</div>
						</div>
                        <div class = "TZSNDContentRightBox">
                            <div class = "TZSNDContentRightItem">
                                <div id = "TZSDYJHNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">计划</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "TZSDYSJNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">完成</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "TZSDYDXNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">投资兑现率</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "TZSNDContent TZSContentBoxItem">
                    <div class = "TZSNDContentLeftBox">
						<div  class="TZSDYContWrap">
							<img src="images/TZSNDIcon.png" width="40px" height="40px">
							<div class = "TZSNDContentLeftText">年度累计</div>
						</div>
                        <div class = "TZSNDContentRightBox">
                            <div class = "TZSNDContentRightItem">
                                <div id = "TZSNDJHNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">计划</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "TZSNDSJNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">完成</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "TZSNDDXNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">投资兑现率</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		
        <div class = "contentBox ZJSDiv">
         
		 <div class="contentDiv">
			<div align="center" class="contentBoxTitle">
				<!-- <img src="images/BG1.png"> -->
				<div class = "titleText" >资金数</div>
				</div>
			</div>	
            <div class = "TZSContentBox" align="center">
                <div class = "TZSDYContent TZSContentBoxItem">
                    <div class = "TZSDYContentLeftItem">
                        <img src="images/TZSDYIcon.png" width="40px" height="40px">
                        <div class = "TZSDYContentLeftText">当月情况</div>
                    </div>
                    <div class = "TZSNDContentRightBox">
                        <div class = "ZJSNDContentRightBox">
                            <div class = "TZSNDContentRightItem">
                                <div id = "ZJSDYJHNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">计划</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "ZJSDYSJNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">完成</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "ZJSDYDXNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">投资兑现率</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class = "TZSNDContent TZSContentBoxItem">
                    <div class = "TZSNDContentLeftItem">
                        <img src="images/TZSNDIcon.png" width="40px" height="40px">
                        <div class = "TZSNDContentLeftText">年度累计</div>
                    </div>
                    <div class = "TZSNDContentRightBox">
                        <div class = "ZJSNDContentRightBox">
                            <div class = "TZSNDContentRightItem">
                                <div id = "ZJSNDJHNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">计划</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "ZJSNDSJNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">完成</div>
                            </div>
                            <div class = "TZSNDContentRightItem">
                                <div id = "ZJSNDDXNums" class = "TZSNDContentRightNums"></div>
                                <div class = "TZSNDContentRightLabel">投资兑现率</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	  </div>	
    </div>

    <div class = "overviewBox2">
     
       <div class="chaTitleBox">
            <div style="float: left;" class="moudolTitle">差异分析</div>
            <img src="images/icon1.png" width="28px" height="15px" style="margin: 10px 5px"/>
       </div>
		
	   <div class="contBoxDiv">	
        <div class = "contentBox2 ZHXMDiv">
        
		<div class="contentDiv">	
		   <div align="center" class="contentBoxTitle">
				<!-- <img src="images/BG1.png"> -->					
				<div class = "titleText titleText2" >滞后项目</div>
			</div>
		</div>	
           <!-- <div class = "ZHXMDescContentBox">
                <img class = "ZHXMDescContentImg" src="images/ZHXMIcon.png" >
               <div class = "ZHXMDescContentText">
                    滞后项目数4个
                </div>
            </div> -->
            <!--滞后项目-->
            <div id = "ZHXMMyChartBox"></div>
        </div>
        <div class = "contentBox2 ZHXMDiv">
           
		<div class="contentDiv">	
		   <div align="center" class="contentBoxTitle">
				<!-- <img src="images/ZHXMTitleGB1.png"> -->					
				<div class = "titleText titleText2">存在滞后风险项目</div>
			</div>
		</div>	
          <!-- <div class = "ZHFXXMDescContentBox">
                <img class = "ZHXMDescContentImg ZHFXXMDescContentImg" src="images/ZHXMIcon.png" >
               <div class = "ZHFXXMDescContentText">
                    存在滞后风险项目4个
                </div>
            </div> -->
            <!--滞后项目-->
            <div id = "ZHFXXMMyChartBox"></div>
        </div>
        <div class = "contentBox2 ZHXMDiv">
       
		<div class="contentDiv">	
		   <div align="center" class="contentBoxTitle">
				<!-- <img src="images/BG1.png"> -->
					<div class = "titleText titleText2">项目列表</div>
			</div>
		</div>	
            <!--项目列表-->
           
          <div class = "XMLBTableBox" align="center">
                <table class="layui-hide" id="XMLBTable" lay-filter="test"  ></table>
            </div>
        </div>
   
   
   
      </div>
	</div>
</div>


</body>
<script src="layui.js"></script>
<script src="index.js"></script>
<script src="echarts/echarts.min.js"></script>
<script src="modules/myChart.js"></script>
<script src="modules/format.js"></script>
<script src="modules/overviewMyChartOption.js"></script>
<script>
    layui.config({
        base: ''
    });
    layui.use(['layer','form','element','laydate','table'], function () {//,'element'
        var layer = layui.layer
            , element = layui.element
            , form = layui.form
            , $ = layui.$
            , laydate = layui.laydate
            , table = layui.table;

        var parentUrl = window.parent.document.getElementById("homeIframe").src;
        var paramArray = parentUrl.split("?paramStr=")[1];   
        var param = decodeURI(paramArray);
        var dataParms = {"proIdList":[window.localStorage.getItem("proId")]};

        $.ajax({
            url: getIP() + '/search/prolag',
            type: 'post',
            dataType: 'json',
            contentType:'application/json',
            data:param,
            success: function (data) {
                if(data.code == "succee"){
                    var dataSource = data.data;
                    //'总数', '节点', '投资数', '资金数'
					console.log(dataSource.lagcount.proids)
                    setZHXMDom(dataSource,table,$);
                    setFXZHDom(dataSource,table,$);
					if(dataSource.lagcount.proids.length>0){
						var dataParms = {"proIdList":dataSource.lagcount.proids};
						var url = '/search/prolist';
							httpAjax(url,dataParms,table);
					}	
				
                }

            }

        })
		
		
        $.ajax({
            url: getIP() + '/search/overview',
            type: 'post',
            contentType:'application/json',
            dataType:"json",
            data:param,
            success: function (data) {
				
                if (data.code == 'succee') {
                    var dataSource = data.data;
                    var proMap = dataSource.proMap[0];
                   
					var  DataText = [ '{value|' + proMap.proCount+ '}','{name|项目总数}'].join('\n');
					var  data = [{value:1, name: '新开项目'}, {value:0, name: '滚动项目'}];
						
					var  myEchartBox = echarts.init(document.getElementById("XMSMyChart"));
					var  option = ChartOption(DataText,data);
					     myEchartBox.setOption(option);
						
					//投资数	 
					var  investment = [];
						if(dataSource.investment){
							var  item = dataSource.investment[0];
							investment= [{
							 "monthInvestPlan":item.monthInvestPlan?item.monthInvestPlan:0,
							 "monthInvestAc":item.monthInvestAc?item.monthInvestAc:0,
							 "monthRatio":item.monthRatio?item.monthRatio:0,
							 "yearInvestPlan":item.yearInvestPlan?item.yearInvestPlan:0,
							 "yearInvestAc":item.yearInvestAc?item.yearInvestAc:0,
							 "yearRatio":item.yearRatio?item.yearRatio:0}]	
							
							
						}else{
							 investment= [{
								 "monthInvestPlan":0,
								 "monthInvestAc":0,
								 "monthRatio":0,
								 "yearInvestPlan":0,
								 "yearInvestAc":0,
								 "yearRatio":0}]	 
						}
						investment.forEach((item)=>{
							$("#TZSDYJHNums").html(ji_suan(item.monthInvestPlan));
							$("#TZSDYSJNums").html(ji_suan(item.monthInvestAc));
							$("#TZSDYDXNums").html(formatNum(item.monthRatio)+"<span>%</span>");
							$("#TZSNDJHNums").html(ji_suan(item.yearInvestPlan));
							$("#TZSNDSJNums").html(ji_suan(item.yearInvestAc));
							$("#TZSNDDXNums").html(formatNum(item.yearRatio)+"<span>%</span>");		
						})			
				
                   
                    

                    //资金数
					var  numofMoney = [];
						if(dataSource.numofMoney){
							var arr = dataSource.numofMoney[0];
							 numofMoney= [{
								 "costMonth":arr.costMonth?arr.costMonth:0,
								 "aucostMongth":arr.aucostMongth?arr.aucostMongth:0,
								 "ratioMonth":arr.ratioMonth?arr.ratioMonth:0,
								 "costYear":arr.costYear?arr.costYear:0,
								 "aucostYear":arr.aucostYear?arr.aucostYear:0,
								 "ratioYear":arr.ratioYear?arr.ratioYear:0}]	
						}else{
							 numofMoney= [{
								 "costMonth":0,
								 "aucostMongth":0,
								 "ratioMonth":0,
								 "costYear":0,
								 "aucostYear":0,
								 "ratioYear":0}]	 
						}
						numofMoney.forEach((item)=>{
							$("#ZJSDYJHNums").html(ji_suan(item.costMonth));
							$("#ZJSDYSJNums").html(ji_suan(item.aucostMongth));
							$("#ZJSDYDXNums").html(formatNum(item.ratioMonth)+"<span>%</span>");
							$("#ZJSNDJHNums").html(ji_suan(item.costYear));
							$("#ZJSNDSJNums").html(ji_suan(item.aucostYear));
							$("#ZJSNDDXNums").html(formatNum(item.ratioYear)+"<span>%</span>");
						})		
					
                }else{
					$("#TZSDYJHNums").html(ji_suan(0));
					$("#TZSDYSJNums").html(ji_suan(0));
					$("#TZSDYDXNums").html(formatNum(0)+"<span>%</span>");
					$("#TZSNDJHNums").html(ji_suan(0));
					$("#TZSNDSJNums").html(ji_suan(0));
					$("#TZSNDDXNums").html(formatNum(0)+"<span>%</span>");
					$("#ZJSDYJHNums").html(ji_suan(0));
					$("#ZJSDYSJNums").html(ji_suan(0));
					$("#ZJSDYDXNums").html(formatNum(0)+"<span>%</span>");
					$("#ZJSNDJHNums").html(ji_suan(0));
					$("#ZJSNDSJNums").html(ji_suan(0));
					$("#ZJSNDDXNums").html(formatNum(0)+"<span>%</span>");
					
				}
            },
        });

       function  ji_suan(num){
		 var value = 0;
		 if(num != null){
			 if(num>99999999){
				  value = Number(parseFloat(num)/100000000).toFixed(0);
				  return    value+"<span>亿</span>";
			 }else{
				 value = Number(parseFloat(num)).toFixed(0);
				  return    value+"<span>万</span>";
			 }
		 }
		
	   }
    });

	
</script>
<style>
    .overviewBox1{
        height:50%;
        width: 100%;		
        padding-bottom: 0.5rem;
	    box-sizing: border-box;
		display: flex;
		flex-direction: column;
    }
	.contBoxDiv{
		width: 100%;
		height:88%;
		display: flex;
		flex-direction: row;
	}
    .overviewBox2{
        height:50%;
        width: 100%;
		display: flex;
		flex-direction:column;
    }
    .overviewContentBox{
        
	    width: 100%;
	    height:100%;
	    overflow: hidden;
        /* margin-left: 20px; */
    }
    .moudolTitle{
        width: 82px;
        height: 18px;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 36px;

    }
    .contentBox{
        display: inline-block;
       
       /* padding: 25px 0px; */
	box-sizing: border-box;
    }
    .contentBox2{
        display: inline-block;
       
    

    }
    .XMSDiv{
     width: 29.1%;
     height:100%;
	background: rgba(4, 36, 82, 0);
	box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46) inset;
	border-radius: 10px;
	margin-right:0.7rem;
    }
    .titleText{
      
     
	    height:2.5rem;
	    line-height:2.5rem;
        font-size:1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
       
       
    }
    .titleText2{
        width:100%;
    }
    .ZJSDiv,.TZSDiv{
      
       width: 34.5%;
       height:100%;
	   background: rgba(4, 36, 82, 0);
	   box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46) inset;
	   border-radius: 10px;
		
    }
    .ZHXMDiv{
       width:32.7%;
       height:100%;
	   background: rgba(4, 36, 82, 0);
	   box-shadow: 0px 0px 40px 0px rgba(89, 155, 255, 0.46) inset;
	   border-radius: 10px;
	   margin-right: 0.7rem;
    
    }
    .ZHXMDiv:last-child{
	   margin-right:0;
    }
    .myChartBox{
        width: 100%;
        height: calc(100% - 60px);
        margin-top: 25px;
    }
    .myChartDescItem{
        width: 80px;
        height: 21px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #08A7E9;
    }
    .myChartDescNum{
        font-size: 36px;
        line-height: 10px;
    }
    .myChartDescLabel{
        font-size: 20px;
    }
    .myChartDesc{
        position: absolute;
        left: 191px;
        top: 233px;
    }
    .ZHXMDescContentBox{
        margin: 0.5rem auto;
        background-image: url(images/zhxmTitleBG1.png);
        background-size: 100% 100%;
        margin: 0.6rem 1.5rem;
		display: flex;
		flex-direction: row;
		width: 55%;
		height: 2rem;
		align-items: center;
    }

    .ZHFXXMDescContentBox{
        /* position: absolute; */
        background-image: url(images/zhxmTitleBG1.png);
        background-size: 100% 100%;
		margin: 0.6rem 1.5rem;
		display: flex;
		flex-direction: row;
		width: 55%;
		height: 2rem;
		align-items: center;
    }
    .ZHXMDescContentImg{
		width: 1.2rem;
		height:1.2rem;
		margin: 0 0.5rem 0 1rem;
        /* margin: 5px 20px; */
    }
    .ZHXMDescContentText{
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 25px;
        display: flex;
		flex-direction: column;
    }
    .ZHFXXMDescContentText{
       /* width: 120px;
        height: 18px; */
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 25px;
       /* position: absolute;
        left: 57px;
        top:7px; */
    }
    #ZHXMMyChartBox{
        width:100%;
	    height:90%;
    }

    #ZHFXXMMyChartBox{
        width:100%;
	    height: 90%;
    }
    .XMLBTableBox{
		width:100%;
		height:auto;
		padding:1rem;
		box-sizing: border-box;
		overflow-y: auto;
    }
    .layui-table-cell{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

    }

    .layui-table-box{
        background: radial-gradient(circle, #264DE0 0%, rgba(38, 77, 224, 0) 100%);
        /*opacity: 0.65;*/
    }
    .layui-none{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ADB7FF !important;
        line-height: 42px;
    }
    table,.layui-border-box{
        border: 0;
    }
    .laytable-cell-1-0-2 {
        width: 101px;
    }
    .TZSContentBoxItem{
        width: 100%;
        height:50%;
        background-image: url(images/inCapital/zong_bgColor.png);
        background-size: 100% 100%;
		display: flex;
		flex-direction: row;
        align-items: center;
    }
    .TZSDYContent{
      
        
    }
    .TZSNDContent{
        /*margin-top: 10px;*/
    }
    .TZSDYContentLeftBox{
     /* 
        float: left;
        position: absolute;
        left: 520px;
        top: 130px; */
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  text-align: center;
	  width:100%;
    }
	
    .TZSNDContentLeftBox{
     /*   float: left;
        position: absolute;
        left: 520px;
        top: 271px; */
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		width:100%;
    }
    .ZJSNDContentRightBox{
      /*  float: left;
        position: absolute;
        left: 555px;
        top: 0px; */
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		width:100%;
    }
    .TZSDYContentLeftText,.TZSNDContentLeftText{
        width:100%;
        height: 14px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 19px;
		text-align: center;
    }
    .TZSNDContentRightItem{
        display: inline-block;
        /* position: absolute; */
    }
    .TZSNDContentRightItem:nth-of-type(1){
		width: 33%;
       /* left: 90px;
        top: 14px; */
    }
    .TZSNDContentRightItem:nth-of-type(2){
       width: 33%;
	   /* left: 190px;
        top: 14px; */
    }
    .TZSNDContentRightItem:nth-of-type(3){
       width: 33%;
	  /*  left: 290px;
        top: 14px; */
    }
    .TZSNDContentRightNums{
        width: 100%;
        height: 21px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
    }
    .TZSNDContentRightLabel{
        width:100%;
        height: 14px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 30px;

    }	
   .titleBox{
	   height:12%;
	}
	
  .contentDiv{
	width:100%;
	height:2.5rem;
	display: flex;
	justify-content: center;
	align-items: center
	}

	
.contentBoxTitle{
	width:22rem;
	background:url(images/BG1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.tzBox{
	margin-right:0.7rem;
}
.chaTitleBox{
	height:12%;
}
.TZSContentBox{
	padding: 0 0.2rem 0 0.5rem;
	box-sizing: border-box;
	height: 85%;
}
.TZSDYContWrap,
.TZSDYContentLeftItem,
.TZSNDContentLeftItem{
    width: 25%;	
	padding-left: 0.8rem;
	box-sizing: border-box;	
}
.TZSNDContentRightBox{
	width: 70%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;

}
.TZSNDContentRightNums>span{
	font-size: 0.8rem;
}
 
#XMLBTable{
	width: 100%;
	/* height:250px; */
}	

.layui-table {
    background-color: #0A3472;
    color: #ADB7FF;
}
.layui-table-view .layui-table {
    width: 100%;
}
.layui-table td, .layui-table th,
 .layui-table-col-set, .layui-table-fixed-r, 
 .layui-table-grid-down, .layui-table-header, 
 .layui-table-page, .layui-table-tips-main, 
 .layui-table-tool, .layui-table-total, 
 .layui-table-view, .layui-table[lay-skin=line], 
 .layui-table[lay-skin=row] {
    border-style:none !important;
}
.layui-table tbody tr:hover{
	 background:none;
}

.layui-table thead tr, .layui-table-click, 
.layui-table-header, .layui-table-hover, 
.layui-table-mend, .layui-table-patch,
 .layui-table-tool, .layui-table-total,
 .layui-table-total tr,
 .layui-table[lay-even] tr:nth-child(even) {
   background: radial-gradient(circle, #264DE0 0%, rgba(38, 77, 224, 0) 100%);
   /* opacity: 0.65; */
   color: #ADB7FF;
}
/* .layui-table-cell {
    color:#ADB7FF;
} */
.layui-table, .layui-table-view{
  margin: 0  0 !important;	
}
.XMLBTableBox   .popper__arrow{
  display:none;
}
.XMLBTableBox ::-webkit-scrollbar{
  width: 5px;
  background-color:#0A3269;
}

.XMLBTableBox ::-webkit-scrollbar-track {
  background-color:#0A3269;
}

.XMLBTableBox ::-webkit-scrollbar-thumb  {
  background:#1B44B3;
  border-radius: 10px;
}

 .layui-table-cell{
	height:auto;
	overflow:visible;
	text-overflow:inherit;
	white-space:normal;
}
</style>
</html>